<template>
  <div class="my-dialog">
    <el-dialog
      :visible="isShow"
      title=""
      width="100%"
      center
      @close="hideModal"
      @destroy-on-close="true"
    >
      <div class="dialog-body">
        <div class="myeltable">
          <el-table
            ref="tableData"
            :data="myTableData"
            height="970"
            style="width: 100%;"
            header-row-class-name="my-header-row"
            header-cell-class-name="my-header-cell"
            row-class-name="my-row"
            cell-class-name="my-cell"
            @sort-change="handleSort"
          >
            <el-table-column label="全市各区车辆统计分析" width="100%" align="center">
              <el-table-column
                prop="AreaName"
                label="区域名称"
              >
              </el-table-column>
              <el-table-column
                prop="Num"
                label="基准月平均车辆数（21年12月）"
                sortable="custom"
              >
              </el-table-column>
              <el-table-column
                label="车辆变化（相对基准）"
              >
                <el-table-column
                  prop="CountryThree"
                  label="当前车辆数"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="CountryFour"
                  label="相对变化量"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="CountryFive"
                  label="相对变化比例"
                  sortable="custom"
                >
                </el-table-column>
                <!--            <el-table-column
                              prop="CountrySix"
                              label="国六"
                              sortable="custom"
                            >
                            </el-table-column>-->
                <el-table-column
                  prop="CountryN"
                  label="国五及以上车辆比例变化"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="CountryS"
                  label="国四以下车辆数"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="CountryF"
                  label="国五车辆数"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="CountryL"
                  label="非国六清洁能源车辆数"
                  sortable="custom"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                label="排放量变化（相对基准）"
              >
                <el-table-column
                  prop="pm"
                  label="Nox排放量变化"
                  sortable="custom"
                >
                </el-table-column>
                <el-table-column
                  prop="nox"
                  label="Nox排放量变化比例"
                  sortable="custom"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogBenchmarkTable',
  data() {
    return {
      value: '',
      myTableData:[],
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    tableData:{
      type:Array,
      default:[]
    },
  },
  watch:{
    isShow(n,o){
      if (!n){
        this.$refs.tableData.clearSort()
      }
    },
    tableData:{
      immediate:false,
      deep:true,
      handler(n,o){
        this.myTableData = n
      }
    },
    myTableData:{
      immediate:true,
      deep:true,
      handler(n,o){

      }
    }
  },
  methods: {
    hideModal() {
      this.$emit('DiaClose')
    },
    handleSort(column){
      let that = this
      let tempTableData = []
      // 获取字段名称和排序类型
      let fieldName = column.prop
      let sortingType = column.order
      // 过滤出符合排序的数据形成新数组，再对该数组进行常规排序
      tempTableData = Object.assign([], that.tableData.filter(el => (el[fieldName] !== ' ' && el[fieldName] !== undefined)))
      if (sortingType !== null) {
        if (sortingType === 'descending') {
          // 按照降序排序
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => parseFloat(b[fieldName]) - parseFloat(a[fieldName]))
        } else { // 按照升序排序
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => parseFloat(a[fieldName]) - parseFloat(b[fieldName]))
        }
        that.myTableData = tempTableData
      } else {
        // 如果是取消排序，则将数据还原成接口返回的数据
        that.myTableData = that.tableData
      }
    }
  }
}
</script>

<style scoped lang="scss">
$color-blue: #00fff4;
$color-blue-dark: #2e9ef2;
::v-deep .el-dialog {
  height: 100%;
  background: #04091Cf0;
  margin-top: 0px !important;
  .el-dialog__header{
    padding: 0px;
  }
  .el-dialog__body {
    width: 100%;height: 100%;
    padding: 50px 50px 30px 50px ;
  }

  .el-dialog__headerbtn {
    border: 2px solid $color-blue;
    border-radius: 100px;
    padding: 2px;

    .el-dialog__close {
      color: $color-blue;
      font-size: 20px;
    }
  }


  .dialog-body {
    width: 100%;
    height: 100%;
    .myeltable{
      width: 100%;
      height: 100%;
    }

  }
}

::v-deep{
  .el-table{
    background: transparent !important;
    color:#e8edf3;
    border:none;
    &::before{
      display: none;
    }
  }
  .el-table--group::after, .el-table--border::after{
    display: none;
  }
  .el-table__header-wrapper{
    margin-bottom: 11px;
  }
  .el-table--scrollable-y .el-table__body-wrapper{
    height: 745px !important;
  }
  .el-table .cell{
    line-height: 1.5;
  }
  //表头行样式
  .my-header-row{
    background-color: transparent;
    background-image: linear-gradient(0deg,rgba(55, 55, 74, 0.4) 0%,rgba(55, 55, 74, 0.4) 100%);
    &:nth-child(1){
      border: dotted 1px #f3e8e866;
      display: flex;
      width: 1820px;
      margin-bottom: 10px;
      text-align: center;
      .my-header-cell{
        width: 100%;font-size: 22px;
        display: flex;align-items: center;justify-content: center;
      }
    }

    &:nth-child(2){
      .my-header-cell{
        font-size: 20px;
        border-top: dotted 1px #f3e8e866;
        border-right: dotted 1px #f3e8e866;
        div{
          text-align: center;
        }
        &:nth-child(1){
          border-bottom: dotted 1px #f3e8e866;
          font-size: 18px;
          border: dotted 1px #f3e8e866;
        }
        &:nth-child(2){
          border-bottom: dotted 1px #f3e8e866;
          font-size: 18px;
        }
        &:nth-child(3){
          border-bottom: dotted 1px #f3e8e866;
          font-size: 18px;
        }
      }
    }
    &:nth-child(3){
      .my-header-cell {
        font-size: 18px;
        border-top: dotted 1px #f3e8e866;
        border-bottom: dotted 1px #f3e8e866;
        border-right: dotted 1px #f3e8e866;
      }
    }
    //border: dotted 1px #f3e8e8;
    //表头单元格样式
    .my-header-cell{
      background: transparent !important;
      height: 60px !important;
      font-size: 14px;
      color: #e8edf3;
      border: none;
    }
  }

  //表单行样式
  .my-row{
    background-color: transparent;
    &:hover{
      color: #07f5d1;

      .my-cell{
        background-color:#07f5d11a !important;
      }
    }
  }
  //表单单元格样式
  .my-cell{
    border: 0px !important;
    font-size: 18px;
    padding: 11px 0px;
    height: 50px;
    .cell{
      line-height: 1.2;
    }
  }
  /*.el-table tr {
    background: transparent ;
  }
  .el-table thead.is-group th.el-table__cell{
    color:#fff;
    background: transparent !important;
  }

  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent;
  }
  .el-table tbody tr:hover>td {
    color:#00fff4;
    background-color:#ffffff26 !important;
  }*/
  /*.el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent ;
  }*/
}

</style>

